<!-- echarts通用配置-->
<template>
	<div>
		<!-- 折叠公共配置 -->
		<el-collapse accordion>
			<!-- 3D组件基础角度设置 -->
			<template v-if="main.vaildProp('threeAngle')">
				<el-collapse-item title="3D属性">
					<el-form-item label="内旋转角">
						<avue-input-number v-model="main.activeOption.alpha" :min="0" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="外旋转角">
						<avue-input-number v-model="main.activeOption.beta" :min="0" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="厚度">
						<avue-input-number v-model="main.activeOption.depth" :disabled="disabled"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 标题设置 -->
			<template v-if="main.vaildProp('titleList')">
				<el-collapse-item title="标题设置">
					<el-form-item label="显示标题">
						<avue-switch v-model="main.activeOption.titleShow" :disabled="disabled"></avue-switch>
					</el-form-item>
					<el-form-item label="标题内容" v-if="main.activeOption.titleShow">
						<avue-input v-model="main.activeOption.title" :disabled="disabled"></avue-input>
					</el-form-item>
					<el-form-item label="字体颜色" v-if="main.activeOption.titleShow">
						<avue-input-color v-model="main.activeOption.titleColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="字体大小" v-if="main.activeOption.titleShow">
						<avue-input-number v-model="main.activeOption.titleFontSize" :disabled="disabled"></avue-input-number>
					</el-form-item>
					<el-form-item label="字体位置" v-if="main.activeOption.titleShow">
						<avue-select v-model="main.activeOption.titlePostion" :disabled="disabled" :dic="dicOption.textAlign"> </avue-select>
					</el-form-item>
					<el-form-item label="顶边距" v-if="main.activeOption.titleShow">
						<avue-input-number v-model="main.activeOption.titleMarginTop" :disabled="disabled"></avue-input-number>
					</el-form-item>
					<el-form-item label="副标题内容">
						<avue-input v-model="main.activeOption.subtext" :disabled="disabled"></avue-input>
					</el-form-item>
					<el-form-item label="副标题字体颜色">
						<avue-input-color v-model="main.activeOption.subTitleColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="副标题字体大小">
						<avue-input-number v-model="main.activeOption.subTitleFontSize" :disabled="disabled"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- X轴设置 -->
			<template v-if="main.vaildProp('barList')">
				<el-collapse-item title="X轴设置">
					<el-form-item label="名称">
						<avue-input v-model="main.activeOption.xAxisName" :disabled="disabled"> </avue-input>
					</el-form-item>
					<el-form-item label="显示">
						<avue-switch v-model="main.activeOption.xAxisShow" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="显示网格线">
						<avue-switch v-model="main.activeOption.xAxisSplitLineShow" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="轴线颜色">
						<avue-input-color v-model="main.activeOption.xAxisLineColor" :disabled="disabled"> </avue-input-color>
					</el-form-item>
					<el-form-item label="标签间隔">
						<avue-input-number v-model="main.activeOption.xAxisinterval" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="字号">
						<avue-input-number v-model="main.activeOption.xNameFontSize" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="颜色">
						<avue-input-color v-model="main.activeOption.xAxisColor" :disabled="disabled"> </avue-input-color>
					</el-form-item>
					<el-form-item label="文字角度">
						<avue-input-number v-model="main.activeOption.xAxisRotate" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="换行字数">
						<avue-input-number v-model="main.activeOption.wrapLength" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="轴反转">
						<avue-switch v-model="main.activeOption.xAxisInverse" :disabled="disabled"> </avue-switch>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 左Y轴 -->
			<template v-if="main.vaildProp('yAxisShow')">
				<el-collapse-item title="左Y轴设置">
					<el-form-item label="显示">
						<avue-switch v-model="main.activeOption.yAxisShow" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="名称">
						<avue-input v-model="main.activeOption.yAxisName" :disabled="disabled"> </avue-input>
					</el-form-item>
					<el-form-item label="单位">
						<avue-input v-model="main.activeOption.axisLabel" :disabled="disabled"> </avue-input>
					</el-form-item>
					<el-form-item label="轴网格线">
						<avue-switch v-model="main.activeOption.yAxisSplitLineShow" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="轴线颜色">
						<avue-input-color v-model="main.activeOption.yAxisLineColor" :disabled="disabled"> </avue-input-color>
					</el-form-item>
					<el-form-item label="反转">
						<avue-switch v-model="main.activeOption.yAxisInverse" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="字号">
						<avue-input-number v-model="main.activeOption.yNameFontSize" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="颜色">
						<avue-input-color v-model="main.activeOption.yAxisColor" :disabled="disabled"> </avue-input-color>
					</el-form-item>
					<el-form-item label="最小间隔">
						<avue-input-number v-model="main.activeOption.yAxisInterval" :disabled="disabled"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 右Y轴 -->
			<template v-if="main.vaildProp('doubleYAxis')">
				<el-collapse-item title="右Y轴设置">
					<el-form-item label="显示">
						<avue-switch v-model="main.activeOption.doubleYAxis.show" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="名称">
						<avue-input v-model="main.activeOption.doubleYAxis.name" :disabled="disabled"> </avue-input>
					</el-form-item>
					<el-form-item label="单位">
						<avue-input v-model="main.activeOption.doubleYAxis.axisLabel" :disabled="disabled"> </avue-input>
					</el-form-item>
					<el-form-item label="字号">
						<avue-input-number v-model="main.activeOption.doubleYAxis.fontSize" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="最小值">
						<avue-input-number v-model="main.activeOption.doubleYAxis.min" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="最大值">
						<avue-input-number v-model="main.activeOption.doubleYAxis.max" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="最小间隔">
						<avue-input-number v-model="main.activeOption.doubleYAxis.interval" :disabled="disabled"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 区域缩放 -->
			<template v-if="main.vaildProp('dataZoom')">
				<el-collapse-item title="区域缩放">
					<el-form-item label="显示">
						<avue-switch v-model="main.activeOption.dataZoom.show" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="滑块">
						<avue-switch v-model="main.activeOption.dataZoom.type" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="滑块高度">
						<avue-input-number v-model="main.activeOption.dataZoom.height" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="滑块距底间距">
						<avue-input-number v-model="main.activeOption.dataZoom.bottom" :disabled="disabled"> </avue-input-number>
					</el-form-item> </el-collapse-item
			></template>
			<!-- 系列配置 -->
			<template v-if="main.vaildProp('seriesColumn')">
				<el-collapse-item title="系列配置">
					<avue-crud :option="tableSeriesOption" :data="main.activeOption.seriesColumn" @row-save="rowSaveSeries" @row-del="rowDelSeries" @row-update="rowUpdateSeries">
					</avue-crud> </el-collapse-item
			></template>
			<!-- 数值设置 -->
			<template v-if="main.vaildProp('labelList')">
				<el-collapse-item title="数值设置">
					<el-form-item label="显示">
						<avue-switch v-model="main.activeOption.labelShow" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="内容格式化">
						<avue-input v-model="main.activeOption.formatter" :disabled="disabled" placeholder="{b}名称 {c}数值 {d}百分比数值"> </avue-input>
					</el-form-item>
					<el-form-item label="旋转角度">
						<avue-input-number v-model="main.activeOption.labelRotate" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="字体大小">
						<avue-input-number v-model="main.activeOption.labelShowFontSize" :disabled="disabled"> </avue-input-number>
					</el-form-item>
					<el-form-item label="字体颜色">
						<avue-input-color v-model="main.activeOption.labelShowColor" :disabled="disabled"> </avue-input-color>
					</el-form-item>
					<el-form-item label="字体粗细">
						<avue-select v-model="main.activeOption.labelShowFontWeight" :disabled="disabled" :dic="dicOption.fontWeight"> </avue-select>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 提示语设置  -->
			<template v-if="main.vaildProp('tipList')">
				<el-collapse-item title="提示语设置">
					<el-form-item label="字体大小">
						<avue-input-number v-model="main.activeOption.tipFontSize" :disabled="disabled"></avue-input-number>
					</el-form-item>
					<el-form-item label="字体颜色">
						<avue-input-color v-model="main.activeOption.tipColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<el-form-item label="开启轮播">
						<avue-switch v-model="main.activeOption.tooltipCarousel" :disabled="disabled"> </avue-switch>
					</el-form-item>
					<el-form-item label="轮播间隔(s)" v-if="main.activeOption.tooltipCarousel">
						<avue-input-number v-model="main.activeOption.tooltipCarouselTime" :disabled="disabled"></avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 轴距离设置 -->
			<template v-if="main.vaildProp('postionList')">
				<el-collapse-item title="坐标轴边距设置">
					<el-form-item label="左边距(像素)">
						<avue-input-number v-model="main.activeOption.gridX" :disabled="disabled" :max="400"></avue-input-number>
					</el-form-item>
					<el-form-item label="顶边距(像素)">
						<avue-input-number v-model="main.activeOption.gridY" :disabled="disabled" :max="400"></avue-input-number>
					</el-form-item>
					<el-form-item label="右边距(像素)">
						<avue-input-number v-model="main.activeOption.gridX2" :disabled="disabled" :max="400"></avue-input-number>
					</el-form-item>
					<el-form-item label="底边距(像素)">
						<avue-input-number v-model="main.activeOption.gridY2" :disabled="disabled" :max="400"></avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 图例设置 -->
			<template v-if="main.vaildProp('legendList')">
				<el-collapse-item title="图例操作">
					<el-form-item label="显示">
						<avue-switch v-model="main.activeOption.legend" :disabled="disabled"></avue-switch>
					</el-form-item>
					<el-form-item label="位置">
						<avue-select v-model="main.activeOption.legendPostion" :disabled="disabled" :dic="dicOption.textAlign"> </avue-select>
					</el-form-item>
					<el-form-item label="布局朝向">
						<avue-select v-model="main.activeOption.legendOrient" :disabled="disabled" :dic="dicOption.orientList"> </avue-select>
					</el-form-item>
					<el-form-item label="顶边距">
						<avue-input-number v-model="main.activeOption.legendTop" :disabled="disabled"></avue-input-number>
					</el-form-item>
					<el-form-item label="字体大小">
						<avue-input-number v-model="main.activeOption.legendFontSize" :disabled="disabled"> </avue-input-number>
					</el-form-item>
				</el-collapse-item>
			</template>
			<!-- 颜色设置 -->
			<template v-if="main.vaildProp('colorList')">
				<el-collapse-item title="自定义配色">
					<el-form-item label="文字颜色">
						<avue-input-color v-model="main.activeOption.nameColor" :disabled="disabled"> </avue-input-color>
					</el-form-item>
					<el-form-item label="轴线颜色">
						<avue-input-color v-model="main.activeOption.lineColor" :disabled="disabled"></avue-input-color>
					</el-form-item>
					<avue-crud :option="colorOption" :data="main.activeOption.barColor" @row-save="rowSave" @row-del="rowDel" @row-update="rowUpdate"></avue-crud>
				</el-collapse-item>
			</template>
			<!-- ECHARTS 系列颜色设置 -->
			<template v-if="main.vaildProp('seriesColorList')">
				<el-collapse-item title="自定义系列颜色">
					<avue-crud :option="colorOption" :data="main.activeOption.barColor" @row-save="rowSave" @row-del="rowDel" @row-update="rowUpdate"></avue-crud>
				</el-collapse-item>
			</template>
		</el-collapse>
	</div>
</template>

<script>
import { dicOption, colorOption, tableSeriesOption } from '@/option/config';
export default {
	name: 'main',
	inject: ['main', 'contain'],
	data() {
		return {
			dicOption: dicOption,
			colorOption: colorOption,
			tableSeriesOption: tableSeriesOption,
			disabled: this.contain.activeObj.isLock
		};
	},
	methods: {
		rowSave(row, done) {
			this.main.activeOption.barColor.push(this.deepClone(row));
			done();
		},
		rowDel(row, index) {
			this.main.activeOption.barColor.splice(index, 1);
		},
		rowUpdate(row, index, done) {
			this.main.activeOption.barColor.splice(index, 1, this.deepClone(row));
			done();
		},
		rowSaveSeries(row, done) {
			this.main.activeOption.seriesColumn.push(this.deepClone(row));
			done();
		},
		rowDelSeries(row, index) {
			this.main.activeOption.seriesColumn.splice(index, 1);
		},
		rowUpdateSeries(row, index, done) {
			this.main.activeOption.seriesColumn.splice(index, 1, this.deepClone(row));
			done();
		}
	}
};
</script>

<style></style>
